<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-13 10:05:04
-->
<template>
  <div class="">
    <!-- 头部 -->
    <Head></Head>
    <!-- /头部 -->

    <!-- 轮播 -->
    <div class="carousel">
      <template>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" />
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- /轮播 -->

    <!-- 项目 -->
    <div class="projects">
      <div class="wrapper">
        <div class="project" v-for="item in ProjectData" :key="item.id">
          <div class="picture">
            <img :src="item.figure" alt="" />
          </div>
          <div class="info">
            <div class="title">
              <h3>
                <strong>{{ item.name }}</strong>
              </h3>
            </div>
            <div class="time">{{ item.beginTime | fmtDate }} ~ {{ item.endTime | fmtDate }}</div>
            <div class="introduce">{{ item.introduce }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="wrapper">
      <h2>学生风采</h2>
      <div class="box">
        <div class="article" v-for="item in articleData.list" :key="item.id">
          <div class="picture">
            <img :src="item.cover" alt="" />
          </div>
          <div class="information">
            <div>
              <strong>{{ item.title }}</strong>
            </div>
            <div>{{ item.publishTime | fmtDate }}</div>
            <div>{{ item.baseUser.realname }}</div>
            <div>
              <el-button
                type="warning"
                plain
                icon="el-icon-star-off"
                size="mini"
                circle
              ></el-button>
              {{ item.readTimes }}
            </div>
          </div>
        </div>
      </div>

      <h2>常见问题</h2>
      <div class="problem">
        <h3>年龄太小</h3>
        <p class="answer">
          其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不
        </p>
      </div>
    </div>

    <!-- /项目 -->
    <!-- 底部 -->
    <!-- /底部 -->
  </div>
</template>

<script>
import { get } from '../utils/request';
import  Head  from './components/Head.vue';

export default {
  components: { Head },
  data() {
    return {
      carousels: [],
      categories: [],
      // 获取研学项目时发送的参数
      projectQuery: {
        page: 1,
        pageSize: 5,
      },
      ProjectData: [],
      // 分页多条件获取学生风采信息 参数
      articleDataQuery: {
        page: 1,
        pageSize: 4,
      },
      // 分页多条件获取学生风采数据
      articleData: [],
    };
  },
  created() {
    this.loadCarousels();
    this.loadCategories();
    this.getProjectData();
    this.getArticleData();
  },
  methods: {
    // 头部栏目
    loadCategories() {
      let url = '/index/category/findAll';
      get(url).then(resp => {
        this.categories = resp.data;
        console.log(this.categories, '分类栏目');
      });
    },

    // 加载轮播图
    loadCarousels() {
      let url = '/index/carousel/findAll';
      get(url).then(resp => {
        this.carousels = resp.data;
        console.log(resp, '轮播图');
      });
    },
    // 项目信息
    getProjectData() {
      let url = '/index/project/pageQuery';
      get(url, this.projectQuery).then(res => {
        this.ProjectData = res.data.list;
        console.log(res.data.list, 'project');
      });
    },
    // 学生风采数据获取
    getArticleData() {
      let url = '/index/article/pageQuery';
      get(url, this.articleDataQuery).then(res => {
        this.articleData = res.data;
        console.log(this.articleData.list, '分页多条件获取学生风采信息ProjectData');
      });
    },
  },
};
</script>

<style scoped>
/* 头部 */
.wrapper {
  width: 90%;
  margin: 0 auto;
}

/* /头部 */

/* 项目 */
.projects {
  padding: 0.5em 0;
}
.projects .project {
  padding: 0.5em 0;
  border-bottom: 1px solid rgb(54, 23, 23);
}
.projects .project > .picture {
  overflow: hidden;
  float: left;
  height: 200px;
  background-color: #ededed;
  width: 400px;
}
.projects .project > .picture::after {
  contain: '';
  display: block;
  clear: both;
}
.projects .project > .picture > img {
  width: 100%;
}
.projects .project > .info {
  line-height: 2em;

  margin-left: 420px;
  height: 200px;
}
/* /项目 */
/* 学生风采 */
.box {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.article {
  flex: 0 0 300px;
  height: 350px;
  border-radius: 5px;
  box-shadow: 0 0 2px #ccc;
}
.article:hover {
  background-color: #f4f4f4;
  box-shadow: 0 0 5px #ccc;
}
.article .picture {
  width: 300px;
  overflow: hidden;
}
.article .picture img {
  border-radius: 5px;
  width: 100%;
  height: 160px;
}
.article .information {
  padding: 1em;
}
.article .information div {
  word-wrap: break-word;
  line-height: 2em;
}

/* /学生风采 */

/* 常见问题 */
.problem {
}
/* /常见问题 */
</style>
